<!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8">
		<title>组件示例3</title>
		<script src="https://cdn.jsdelivr.net/npm/vue@2/dist/vue.js"></script>
	</head>
	<body>
		<div id="app">
			<h3>子组件属性值与父组件数据"双向绑定"</h3>
			<h5>通过子组件抛出自定义事件通知父组件修改传入的属性值</h5>
			<!-- <my-input1 :value="text"></my-input1> -->
			<my-input1 :value="text" v-on:update:value="textChangeHandle($event)"></my-input1>
			<p>传入子组件中的值是：{{text}}</p>
			<hr >
			<br>
			<h5>通过.sync属性修饰符简化写法实现子组件属性值在内部与父组件中"双向绑定"</h5>
<my-input2 :value.sync="text"></my-input2>
<p>传入子组件中的值是：{{text}}</p>
			<hr >
			<br>
			
		</div>
	</body>
	<script type="text/javascript">
		Vue.component('my-input1', {
			template: '<input :value="value" @input="changeVal" />',
			props: ['value'],
			methods: {
				changeVal: function(event) {
					// 不允许直接在子组件中修改属性值
					// this.value = event.target.value;
					// 改为通过自定义事件通知外部属性值发生了变化
					this.$emit('update:value', event.target.value);
				}
			}
		});
		
		Vue.component('my-input2', {
			template: `<input :value="value" @input="changeVal" />`,
			props: ['value'],
			methods: {
				changeVal: function(event) {
					this.$emit('update:value', event.target.value);
				}
			}
		});
		let vm = new Vue({
			el: '#app',
			data: {
				text: '这是子组件中的内容'
			},
			methods: {
				textChangeHandle: function(val){
					this.text = val;
				}
			}
		});
	</script>
</html>
